<template>
  <div id="app">
    <div>
      <x-chart id="test" :option="option"></x-chart>
    </div>
    <div id="container" class="container"></div>
  </div>
</template>

<script>
// 导入chart组件
import XChart from "../components/chart.vue";
// 导入chart组件模拟数据
import options from "../chart-options/options01";
import axios from "../utils/request";
import $ from "jquery";

export default {
  name: "app",
  data() {
    let option = options.bar;

    return {
      option: option,
      // id: "test2",
    };
  },
  methods: {
    NewMap() {
      let map = new AMap.Map("container", {
        mapStyle: "amap://styles/grey",
        zoom: 5,
        pitch: 0,
        center: [104.090834, 31.270677],
        features: ["bg", "road"],
        viewMode: "3D",
      });
      let layer = new Loca.LabelsLayer({
        fitView: true,
        map: map,
        collision: true,
      });
      $.get(
        "http://a.amap.com/Loca/static/mock/trafficjam_lnglat.csv",
        function (datas) {
          layer
            .setData(datas, {
              type: "csv",
              lnglat: function (o) {
                return dist[o.value["地区"]];
              },
              lnglat: "lnglat",
            })
            .setOptions({
              style: {
                direction: "center",
                offset: [0, 0],
                text: function (data) {
                  return data.value["city"] + " " + data.value["mom"];
                },
                fillColor: function (data) {
                  var income = +data.value["mom"].slice(0, -1);
                  return income < -5
                    ? "#0C6DB0"
                    : income < -4
                    ? "#99d594"
                    : income < -3
                    ? "#99d594"
                    : income < -2
                    ? "#fee08b"
                    : income < -1
                    ? "#fee08b"
                    : "#fc8d59";
                },
                fontSize: function (data) {
                  var income = +data.value["mom"].slice(0, -1);
                  return income < -5
                    ? 12
                    : income < -4
                    ? 12
                    : income < -3
                    ? 16
                    : income < -2
                    ? 18
                    : income < -1
                    ? 26
                    : 30;
                },
                strokeWidth: 0,
              },
            })
            .render();

          layer.setzIndex(100);
        }
      );
    },
  },
  components: {
    XChart,
  },
  created() {},
  mounted() {
    this.NewMap();
    // this.Newlayer();
  },
};
</script>
<style>
#test {
  float: left;
  margin-left: 20px;
  width: 450px;
  height: 400px;
}
#container {
  margin: 0;
  padding: 0;
  width: 100%;
  /* height: 100%; */
  height: 400px;
}
</style>